<template>
  <div class="left-nav">
    <el-menu class="zw-nav" :collapse="navStore.isCollapsed" router>
      <template v-for="item in permissionRoutes" :key="item.name">
        <!-- 带子菜单 -->
        <el-sub-menu v-if="item.children && item.children.length > 0">
          <template #title>
            <el-icon>
              <component :is="item.meta?.icon"></component>
            </el-icon>
            <span>{{ item.meta?.name }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.name" :index="child.path">
            <el-icon>
              <component :is="child.meta?.icon"></component>
            </el-icon>
            <span>{{ child.meta?.name }}</span>
          </el-menu-item>
        </el-sub-menu>
        <!-- 不带子菜单 -->
        <el-menu-item v-else :index="item.path">
          <el-icon>
            <component :is="item.meta?.icon"></component>
          </el-icon>
          <span style="width: 120px;">{{ item.meta?.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script lang="ts" setup>
import Routes from "@/router/menu.ts"
import type { MenuVO } from "@/server/menu/types";
import { useNavStore } from "@/stores/LeftNavStore";
import { onBeforeMount, ref } from "vue";
import type { RouteRecordRaw } from "vue-router";


const permissionRoutes = ref<RouteRecordRaw[]>([]);
onBeforeMount(() => {
  const menuAuth = localStorage.getItem("menuAuth");
  const permissions = (menuAuth ? JSON.parse(menuAuth) : []) as MenuVO[];
  const orderedMenus = permissions.sort((p, c) => p.orderBy - c.orderBy);
  orderedMenus.map(x => {
    return Routes.find(r => r.name === x.menuCode);
  }).forEach(x => {
    if (x) {
      permissionRoutes.value.push(x);
    }
  })
  // permissionRoutes.value = Routes.filter(x => x.meta?.menu === true && permissions.some(y => y.menuCode === x.name));
})

const navStore = useNavStore();
</script>
<style lang="scss" scope>
.zw-nav {
  height: 100%;
  // width: 200px;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
